<!DOCTYPE html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <test :count="10" @return-res="accept"></test>
  <div>count的计算结果: {{ res }}</div>
</div>

<script>
var test = {
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  template: '<div>test 组件,  count: {{ count }} <button @click="clickBotton()">按钮</button> </div>',
  methods: {
    clickBotton() {
      const res = this.count * 100
      
      console.log('按钮被点击')
      console.log(res)
      
      this.$emit('return-res', res)
    },
  }
}

Vue.component('test', test)
  
var vm = new Vue({
  el: '#app',
  data: {
    res: '',
  },
  methods: {
    accept(res) {
      console.log('获取计算结果', res)
      this.res = res
    },
  }
})
</script>


<script src="">
// 自定义事件
// 在子组件中通过$emit来定义事件的名称,和参数,多个参数可以用逗号隔开,  在组件标签中通过@来将自定义事件绑定到某个方法, 
</script>
